<!--生涯展示情况-->
<script setup lang="js">
import {computed} from "vue";

const {hiddenCode} = defineProps({
  "hiddenCode": {
    type: String,
    default: "public"
  }
})


const hiddenInfoMap = {
  'PRIVATE': {
    style: {
      'background-color': 'rgba(227, 7, 12, 0.56)'
    },
    text: '隐藏',
    isHidden: true,
    detailText: "生涯战绩隐藏"
  },
  'PUBLIC': {
    style: {
      'background-color': 'rgba(118,223,104,0.53)'
    },
    text: '公开',
    isHidden: false,
    detailText: "生涯战绩公开"
  }
}


const hiddenInfo = computed(() => {
  return hiddenInfoMap[hiddenCode];
})


</script>

<template>
  <div style="border-radius: 4px;display: flex;justify-content: center;align-items: center"
       :style="hiddenInfo?.style ">
    <el-icon>
      <Lock v-if="hiddenInfo?.isHidden ===true"/>
      <Unlock v-else/>
    </el-icon>
    <span style="font-size: small;">
          {{ hiddenInfo?.text }}
        </span>
  </div>

</template>

<style scoped>
.hidden {
  background-color: rgba(227, 7, 12, 0.56);
}

.public {
  background-color: rgba(29, 227, 7, 0.56);
}
</style>